<template>
    <custom-page-box class="custom-page-box">
        <template v-if="$route.query.status === '5'">
            <div class="edit-tips">温馨提示：本服务已审核通过，如修改后再次提交，需要重新进行审核</div>
            <div class="h10"></div>
        </template>
        <div class="service-manage-update-container" :class="$route.query.status === '5' ? 'height-change' : ''">
            <div class="step" v-if="$route.query.status !== '5'">
                <div class="step-item">
                    <p class="circle active">
                        <span class="num">1</span>
                    </p>
                    <p class="label">选择服务报价类目</p>
                </div>
                <div class="line" :class="{ active: updateForm.step > 1 }">
                    <img v-if="updateForm.step > 1" src="~/assets/images/service-arrow-active.png" alt="" />
                    <img v-else src="~/assets/images/service-arrow.png" alt="" />
                </div>
                <div class="step-item">
                    <p class="circle" :class="{ active: updateForm.step > 1 }">
                        <span class="num">2</span>
                    </p>
                    <p class="label">填写服务报价信息</p>
                </div>
                <div class="line" :class="{ active: updateForm.step > 2 }">
                    <img v-if="updateForm.step > 2" src="~/assets/images/service-arrow-active.png" alt="" />
                    <img v-else src="~/assets/images/service-arrow.png" alt="" />
                </div>
                <div class="step-item">
                    <p class="circle" :class="{ active: updateForm.step > 2 }">
                        <span class="num">3</span>
                    </p>
                    <p class="label">发布成功，等待审核</p>
                </div>
            </div>
            <div class="step-content">
                <step1 v-if="updateForm.step === 1" v-model="updateForm" :treeData="treeData"></step1>
                <step2 v-if="updateForm.step === 2" v-model="updateForm"></step2>
                <step3 v-if="updateForm.step === 3" v-model="updateForm"></step3>
            </div>
        </div>
    </custom-page-box>
</template>

<script>
import Step1 from '@/components/service-manage/step1'
import Step2 from '@/components/service-manage/step2'
import Step3 from '@/components/service-manage/step3'

export default {
    name: 'ServiceManageUpdate',
    components: {
        Step1,
        Step2,
        Step3
    },
    data () {
        return {
            updateForm: {
                type: [],
                step: 1
            },
            treeData: []
        }
    },
    watch: {
        'updateForm.step' (val) {
            if (val !== 3 && document) {
                document.getElementsByClassName('page-box')[0].scrollTop = 0
            }
        }
    },
    created () {
        this.getTree()
    },
    methods: {
        async getInfo () {
            const res = await this.$ApiServer['service/getInfo']({
                id: this.$route.query.id
            })
            if (res.code === 200) {
                const { title, detail, photo, price, serviceKindId, slideshow, unit, label, videoUrl, imgCoverUrl } =
                    res.data
                const serviceKindIds = serviceKindId.split(',')
                const arr = []
                if (serviceKindIds.length) {
                    serviceKindIds.forEach((id) => {
                        this.treeData.forEach((item) => {
                            item.children.forEach((it) => {
                                it.children.forEach((i) => {
                                    if (i.id === id) {
                                        arr.push([item, it, i])
                                    }
                                })
                            })
                        })
                    })
                }
                this.updateForm = {
                    type: arr,
                    step: 2,
                    title,
                    img: photo.split(','),
                    banner: slideshow.split(','),
                    price,
                    unit,
                    videoUrl,
                    imgCoverUrl,
                    info: detail,
                    label: label
                        ? label.split(',').map((item) => {
                            return { name: item }
                        })
                        : []
                }
            } else {
                this.$message.error(res.message)
            }
        },
        async getTree () {
            const res = await this.$ApiServer['operationConfig/getTree']()
            if (res.code === 200) {
                const add = (list) => {
                    list.forEach((item) => {
                        if (item.children && item.children.length) {
                            item.children = add(item.children)
                        } else {
                            item.children = []
                        }
                    })
                    return list
                }
                this.treeData = add(res.data)
                const filterStatus = (list) => {
                    return list.filter((item) => {
                        if (item.children) {
                            item.children = filterStatus(item.children)
                        }
                        return item.status
                    })
                }
                this.treeData = filterStatus(this.treeData)
                if (this.$route.query.id) {
                    this.getInfo()
                }
            } else {
                this.$message.error(res.message)
            }
        }
    }
}
</script>

<style scoped lang="less">
.service-manage-update-container {
    height: 100%;
    background-color: #fff;
    border-radius: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    .step {
        height: 80px;
        border-radius: 4px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        .step-item {
            margin: 0 18px;
            display: flex;
            align-items: center;
            cursor: pointer;
            .circle {
                width: 32px;
                height: 32px;
                background: #e4e4e4;
                border-radius: 50%;
                position: relative;
                margin-right: 10px;
                .num {
                    position: absolute;
                    top: 5px;
                    left: 5px;
                    display: block;
                    width: 22px;
                    height: 22px;
                    background: #999999;
                    border-radius: 50%;
                    font-size: 16px;
                    font-weight: bold;
                    line-height: 22px;
                    color: #ffffff;
                    text-align: center;
                }
                &.active {
                    background: #ddf7e9;
                    .num {
                        background: @primary-color;
                    }
                }
            }
            .label {
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                color: #333333;
            }
        }
        .line {
            width: 23%;
            border-bottom: 1px dotted #d4d4d4;
            position: relative;
            &.acitve {
                border-color: #fedfdf;
            }
            img {
                position: absolute;
                display: block;
                width: 20px;
                height: 23px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
    .step-content {
        background-color: #fff;
        height: calc(100% - 90px);
        padding: 0 10px;
    }
}

.edit-tips {
    margin: -10px -10px 10px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    color: @primary-color;
    background: #ddf7e9;
    height: 40px;
}
.custom-page-box {
    overflow-y: hidden;
}
.height-change.service-manage-update-container {
    height: calc(100% - 40px);
    padding-top: 10px;
}
</style>
